<template>
  <div>
    <van-form @submit="onSubmit" class="pt-md">
      <van-field
        label-class="width-label"
        v-model="form.username"
        type="text"
        label="账号"
        clearable
        maxlength="30"
        placeholder="手机号/邮箱"
      />
      <van-field
        label-class="width-label"
        v-model="form.password"
        :type="toggleType"
        label="密码"
        clearable
        maxlength="20"
        placeholder="请输入密码"
      >
        <template #right-icon>
          <van-icon
            :name="toggleIconMap[toggleType]"
            class="text-md pr-md"
            @click="onTogglePassword"
          />
        </template>
        <template #button>
          <span class="px-md van-hairline--left">忘记密码</span>
        </template>
      </van-field>
      <div class="m-2x">
        <van-button
          :loading="loading"
          round
          block
          type="info"
          :disabled="isDisabledSubmit"
          native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
    <van-row class="text-gray-400 text px-lg" type="flex">
      <van-col span="12">
        <span @click="onToggleAccountLogin">验证码登录</span>
      </van-col>
      <van-col span="12" class="text-right"> 手机快速注册 </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'AccountLogin',
  props: {
    loading: Boolean
  },
  data() {
    return {
      form: {
        username: 'example@123.com',
        password: '123456'
      },
      toggleType: 'password',
      toggleIconMap: {
        text: 'eye-o',
        password: 'closed-eye'
      }
    };
  },
  computed: {
    isDisabledSubmit() {
      const { username, password } = this.form;
      return !username.trim().length || !password.trim().length;
    }
  },
  methods: {
    onSubmit() {
      this.$emit('submit', this.form);
    },
    onTogglePassword() {
      if (this.toggleType === 'password') {
        this.toggleType = 'text';
      } else {
        this.toggleType = 'password';
      }
    },
    onToggleAccountLogin() {
      this.$emit('toggle', 'Mobile');
    }
  }
};
</script>
